<template>
  <div>
    <el-table :data="tableData" height="600" style="width: 100%">
    <el-table-column prop="id" label="订单号" width="150" />
    <el-table-column prop="name" label="订单商品" width="150" />
    <el-table-column prop="num" label="订单数量" width="150" />
    <el-table-column prop="address" label="收件地址" width="150" />
    <el-table-column prop="addressee" label="收件人" width="150" />
    <el-table-column prop="phone" label="电话号码" width="120" />
    <el-table-column  label="操作 " width="120" >
      <template #default="scope">
        <el-button link type="primary" size="small" @click="remove(scope.$index)" >删除</el-button>
        <el-button link type="primary" size="small" @click="handleEdit(scope.$index)">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog v-model="orderformvisble" title="商品信息">
    <el-form :model="form">
      <el-form-item label="商品编号" :label-width="formLabelWidth">
        <el-input v-model="form.id" autocomplete="off" />
      </el-form-item>
      <el-form-item label="商品名称" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="商品地区" :label-width="formLabelWidth">
    
      </el-form-item>
      <el-form-item label="商品分类" :label-width="formLabelWidth">
        <el-select
    v-model="form.sort"
    class="m-2"
    placeholder="请选择种类"
    size="large"
    style="width: 240px"
  >
    <el-option
      v-for="item in kind"
      :key="item"
      :label="item"
      :value="item"
    />
  </el-select>
      </el-form-item>
      <el-form-item label="商品图片" :label-width="formLabelWidth">
     <input type="file" name="" id="">
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="orderformvisble = false">取消</el-button>
        <el-button type="primary" @click="Editconfirm">
         确定
        </el-button>
      </span>
    </template>
  </el-dialog>
  </div>
</template>

<script>
import axios from '@/utils/request';
export default {
name:'OrderManage',
data() {
  return {
    orderformvisble:false,
    form:{
      id:'',
      name:'',
      num:'',
      address:'',
      addressee:'',
      phone:''
    },
    tableData:[
{
  id:1,
  name:"小郎酒",
  num:1,
  address:'吉安'

}
    ]
  }
},
methods:{
  remove(index){
    const parmas={
      id:this.tableData[index].id
    }
    axios.post('/ser_order/delete',JSON.stringify(parmas)).then(res=>{
console.log(res);
    })
    this.tableData.splice(index,1)
  },
  getall(){
    axios.get('/ser_order/selallord').then(res=>{
      this.tableData=res.data
      console.log(res);
    })
  },
  handleEdit(index){
      this.form =this.tableData[index]
      //把当前编辑的行号赋值给全局保存的行号
      this.orderformvisble = true
  },
  Editconfirm(){
    const params={
      id:this.form.id
    }
    axios.post('/ser_order/update',JSON.stringify(params))
    this.form={}
    this.orderformvisble=false
  },
},
mounted(){
  this.getall()
}
}
</script>

<style>

</style>